<template>
  <div class="container">

    <full-calendar
      firstDay="1"
      lang="zh"
      :events="holidayList"
      @eventClick="eventClick"
      @changeMonth="changeDate"
    >
    </full-calendar>
  </div>
</template>
<script>
import FullCalendar from "@/components/vue-fullcalendar/fullCalendar";
import { mapState, mapGetters } from "vuex";
import { listHoliday, getHoliday, updateHoliday } from "@/api/upms/holiday";
export default {
  name:"Holiday",
  components: {
    FullCalendar,
  },
  data() {
    let self = this;
    return {
      holidayList: [],
      events: [],
      selectedDay: "",
      holidayStatus: "",
      selectedYear: new Date().getFullYear(),
    };
  },
  created() {
    this.getList(this.selectedYear);
  },
  watch: {
    selectedYear: function (newVal, oldVal) {
      if (newVal != oldVal) {
        this.getList(newVal);
      }
    },
  },
  computed: {
    /*mapState({
      useFuncList: (state) => state.useFunction.useFuncList,
    }),
    ...mapGetters(["emplId"]),*/
  },
  methods: {
    getList(year) {
      listHoliday(year).then((response) => {
        //console.log(response);
        this.holidayList = response.rows;
      });
    },
    eventClick(date, event, jsEvent, pos) {
      this.selectedDay = this.parseTime(date, "{y}-{m}-{d}");
    },
    changeDate(start, end, currentStart, currentDate) {
      this.selectedYear = this.parseTime(currentDate, "{y}");
    },
    submitHoliday() {
      let param = {};
      param.holidayDate = this.selectedDay;
      param.holidayFlag = "0";
      param.changeEmplId = this.emplId;
      //console.log(param);
      if (this.selectedDay != "") {
        this.$prompt(
          "请输入备注",
          "确定设置" + this.selectedDay + "为节假日吗？",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then(({ value }) => {
            param.holidayName = value;
            updateHoliday(param).then((res) => {
              this.$message({ message: "设置成功", type: "success" });
              //this.getList(this.selectedYear);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消设置",
            });
          });
      } else {
        this.$message({ message: "请选择日期", type: "error" });
      }
    },
    submitWorkDay() {
      let param = {};
      param.holidayDate = this.selectedDay;
      param.holidayFlag = "1";
      param.changeEmplId = this.emplId;
      if (this.selectedDay != "") {
        this.$prompt(
          "请输入备注",
          "确定设置" + this.selectedDay + "为工作日吗？",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        )
          .then(({ value }) => {
            param.holidayName = value;
            updateHoliday(param).then((res) => {
              this.$message({ message: "设置成功", type: "success" });
              this.getList(this.selectedYear);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消设置",
            });
          });
      } else {
        this.$message({ message: "请选择日期", type: "error" });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding-top: 30px;
  margin: 0 auto;
  background: #fff;
  .buttons {
    margin-left: 50px;
  }
}
/*
/deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
    font-size: 16px;
    line-height: 20px;
    width: 20px;
}
/deep/.full-calendar-body .dates .dates-events .events-week .events-day {
    min-height: 70px;
}
/deep/.full-calendar-body .dates .dates-events .events-week .events-day .event-box {
  height: 20px;
}
/deep/.full-calendar-body .dates .dates-events .events-week .events-day .day-number {
    font-size: 18px;
    margin-top: -20px;
}*/
</style>
